<template>
    <div>
        <div class="logo">
     <img src="static/images/logo.jpg" alt="心上">
        </div>
        <div class="login">
            <input type="text" placeholder="输入手机号" v-model="username"><br/>
            <input type="text" placeholder="输入密码" v-model="password"><br/>
            <input type="submit" value="登录" class="btn" @click.stop="login">
        </div>
    </div>
</template>

<script>
// stop是既阻止默认事件又阻止事件冒泡么？
import { Login } from '@/requests/apis'
import {
  mapMutations,
  mapState
} from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    user (val) {
      if (val.isLogin === true) {
        //   console.log(this)
        const { redirect = '/home' } = this.$route.params
        // console.log(redirect)
        this.$router.push(redirect)
      }
    }
  },
  methods: {
    ...mapMutations(['loginSuccess']),
    login () {
      //   console.log(this.$router)
      const {
        username,
        password
      } = this
      // console.log(username, password)
      this.$userhttp.post(Login, {username, password})
        .then((resp) => {
          if (resp.data.code === 200 && resp.data.errormsg === 'ok') {
            this.loginSuccess(resp.data.data)
            console.log(25)
          }
        })
    }
  }
}
</script>

<style lang='scss'>
.logo{
    padding-top: 50px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    // vertical-align: middle;
    // display: table-cell;  图片垂直居中
    vertical-align: middle;
    img{
    height: 100px;
    width: 100px;
}
}
.login{
    text-align: center;
    // overflow: hidden;
    input{
        // display: block;
        height: 45px;
        width: 310px;
        margin: 0 auto;
        margin-bottom: 5px;
        // &:nth-child(3){
        //     background: red
        // }这个地方会出错？加了br的原因？
    }
    .btn{
        background: #f44336;
        color: white;
        font-size: 16px;
        border: none;
    }
}

</style>
